<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TalkLog</title>

	<link rel="stylesheet" href="./Css/index.css#5551">
	<link rel="stylesheet" href="./Css/Obj.css">




</head>


<body>

	<header>
		<div class="signInBox showUp">Sign in</div>
		<div id="User" class="signInBox User">
			<span class="UserName"></span>
			<ul class="userUl">
				<li class="userLi">标签</li>
				<li class="userLi">设置</li>
				<li class="userLi">登出</li>
			</ul>
		</div>
		<div id="Classs" class="Classs signInBox">
			<span class="UserName">小组</span>

		</div>
	</header>


	<main>
		<!-- <div id="bbb"></div>
		<div id="bbb"></div>
		<div id="bbb"></div>
		<div id="bbb"></div>
		<div id="bbb"></div>
		<div id="bbb"></div> -->

		<!-- 主视栏 -->
		<!-- 新闻板块 -->
		<section class="Znews Zbox">
		</section>

		<!-- 组板块 -->
		<section class="Zclass Zbox mainWidth">
		</section>

		<!-- 内容板块 -->
		<section class="Zcontent Zbox">
		</section>



		<section class="addClass">
			<div class="closefatherBtm">X</div>
			<span class="addClassBtm addClassBtmUp" id='addClassBtm'>创建小组</span>
			<span class="addClassBtm" id='intoClassBtm'>加入小组</span>
			<input type="text" maxlength="7" minlength="4" placeholder="创建小组的组名" class="intoClassInput showUp">
			<input type="text" maxlength="7" minlength="4" placeholder="加入小组的ID" class="intoClassInput">
			<div class="classAddClasssubmitBtm">确定</div>
		</section>


		<section class="ZleftNav">
			<button class="pagetabelBtm">
				<p>^</p>
			</button>
			<button class="pagetabelBtm">
				<p>书签</p>
			</button>
			<button class="pagetabelBtm">
				<p>写入</p>
			</button>
		</section>

		<section class="Ztag">
             

		</section>


		<!-- <div id="newContent_buttom_id" class="pagetabelBtm" onclick="showOperationInterface('submit')">+</div> -->


		<!-- 滑动测试条 -->
		<!-- <div style="height: 20px;background-color: black; "></div> -->





	</main>
	<!-- 编辑板块 -->
	<!-- id="OperationInterface" -->
	<section  class="Zedit  Zbox">
		<ul class="editBar">
			<li class="editBtm"><span>submit</span></li>
			<li class="editBtm"><span>other</span></li>
			<li class="editBtm"><span>X</span></li>
		</ul>
		<input type="text" class="editHead" placeholder="想一个标题吧">
		<textarea class="editArea mainWidth" placeholder="写一点东西吧" name="editArea" id="editArea_id"  cols="30" rows="10"></textarea>
		<!-- <button id="submit" onclick="submit()" class="editBtm"></button>
		<button id="reditsubmit" onclick="reditsubmit()" class="editBtm"></button>
		<button id="offBtm" onclick="offBtm()" class="editBtm"></button> -->
	</section>

</body>

<!-- 每一个整体内容栏都有一个由时间戳+用户名+组名的独立ID -->


<script>






	//保存整体内容栏的ID
	function addcontentBoxId(id) {
		contentBoxIdArray.push(id);
		console.log(contentBoxIdArray);
	}




	//再编辑按钮 在BOX下 reditBtm
	var reditBtm = {
		width: '30px',
		height: '30px',
		backgroundColor: 'grey',
		position: 'absolute',
		left: '30px',
		top: '25px',
		display: 'block',

		GzArr() {
			var a = []
			var b = []

			for (x in reditBtm) {
				a.push(x)
				b.push(reditBtm[x])
			}
			a.pop();
			a.pop();
			b.pop();
			b.pop();

			this.Gz(a, b);
		},

		Gz: function (arr, arrData) {
			let a = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr')
			let b = document.createElement("div")

			for (var i = 0; i <= arr.length - 1; i++) {

				b.style[arr[i]] = arrData[i];
			}
			b.id = contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr' + 'reditBtm';


			a.appendChild(b)

			b.onclick = function () {

				reditBtmClick(b)

			}
		}
	}

	//再编辑按钮点击事件
	function reditBtmClick(b) {
		//找基础ID方法
		let a = b.id + '';
		let d = a.substring(13, 0);

		reditIdsave = d; //点击编辑按钮后，会将该栏对应的基础ID存在公开变量中
		let e = document.getElementById(reditIdsave + 'contentFr' + 'contentTag').innerText;
		document.getElementById('editArea_id').value = e;

		showOperationInterface('reditsubmit');

	}

	//删除按钮 reditFr下 
	var deleteContentboxBtm = {
		width: '30px',
		height: '30px',
		backgroundColor: 'black',
		position: 'absolute',
		left: '65px',
		top: '25px',
		display: 'block',

		GzArr() {
			var a = []
			var b = []

			for (x in deleteContentboxBtm) {
				a.push(x)
				b.push(deleteContentboxBtm[x])
			}
			a.pop();
			a.pop();
			b.pop();
			b.pop();

			this.Gz(a, b);
		},

		Gz: function (arr, arrData) {
			let a = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr')
			let b = document.createElement("div")

			for (var i = 0; i <= arr.length - 1; i++) {

				b.style[arr[i]] = arrData[i];
			}
			b.id = contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr' + 'deleteContentboxBtm';

			a.appendChild(b)
			b.onclick = function () {

				deleteContentboxBtmClick(b)

			}
		}
	}

	//删除整体内容栏按钮的点击事件
	function deleteContentboxBtmClick(a) {
		let b = a.id.substring(13, 0)   //ID后续会调整 
		deleteIdsave = b;
		let c = document.getElementById(b);
		c.style.transition = 'all .5s'
		c.style.opacity = "0"
		setTimeout('deleteContentboxBtmClick_2()', 300)


	}
	function deleteContentboxBtmClick_2() {

		contentBoxIdArray = contentBoxIdArray.filter((x) => x !== deleteIdsave);
		document.getElementById(deleteIdsave).remove();
		deleteIdsave = null;

	}

	//修改记录按钮
	var editRecordBtm = {
		width: '60px',
		height: '30px',
		backgroundColor: 'green',
		position: 'absolute',
		left: '100px',
		top: '25px',
		display: 'block',
		fontSize: '8px',
		textAlign: 'center',
		lineHeight: ' 30px',

		GzArr() {
			var a = []
			var b = []

			for (x in editRecordBtm) {
				a.push(x)
				b.push(editRecordBtm[x])
			}
			a.pop();
			a.pop();
			b.pop();
			b.pop();

			this.Gz(a, b);
		},

		Gz: function (arr, arrData) {
			let a = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr')
			let b = document.createElement("div")

			for (var i = 0; i <= arr.length - 1; i++) {

				b.style[arr[i]] = arrData[i];
			}

			b.id = contentBoxIdArray[contentBoxIdArray.length - 1] + 'reditFr' + 'editRecordBtm';
			b.innerText = '修改记录'
			a.appendChild(b)
			b.onclick = function () {

				editRecordBtmClick(b)

			}
		}
	}

	function editRecordBtminnerText(objid, num) {
		let a = objid + 'reditFr' + 'editRecordBtm';
		document.getElementById(a).innerText = '已修改' + num + '次'
	}

	//查看修改记录按钮的点击事件

	function editRecordBtmClick(b) {
		editRecordBan.GzArr()

	}

	//修改记录板
	var editRecordBan = {
		width: '500px',
		height: '500px',
		backgroundColor: 'green',
		position: 'absolute',
		left: '150px',
		top: '25px',
		display: 'block',
		overflow: 'hidden',

		GzArr() {
			var a = []
			var b = []

			for (x in editRecordBan) {
				a.push(x)
				b.push(editRecordBan[x])
			}
			a.pop();
			a.pop();
			b.pop();
			b.pop();

			this.Gz(a, b);
		},

		Gz: function (arr, arrData) {
			let a = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1])
			let b = document.createElement("div")

			for (var i = 0; i <= arr.length - 1; i++) {

				b.style[arr[i]] = arrData[i];
			}
			b.id = contentBoxIdArray[contentBoxIdArray.length - 1] + 'editRecordBan';
			a.appendChild(b)


			let e = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1]).editDate.length
			for (var i = 1; i <= e; i++) {
				editRecordBaninBan.GzArr();
			}
			b.onwheel = function () {
				editRecordBanonWheel(event, e, b);
			}
		}
	}

	//修改记录板的滚轮事件 
	function editRecordBanonWheel(event, e, b) {
		event = event || window.event;

		if (e > 3) {
			if (event.wheelDelta > 0) {
				console.log(111);
			}
			if (event.wheelDelta < 0) {
				b.style.paddingBottom = parseInt(b.style.paddingBottom) + 2 + 'px'
			}
		}



	};
	//修改记录板中板
	var editRecordBaninBan = {
		width: '100%',
		height: '33%',
		backgroundColor: 'grey',
		marginTop: '2px',
		// position: 'absolute',
		// left: '150px',
		// top: '25px',
		display: 'block',

		GzArr() {
			var a = []
			var b = []

			for (x in editRecordBaninBan) {
				a.push(x)
				b.push(editRecordBaninBan[x])
			}
			a.pop();
			a.pop();
			b.pop();
			b.pop();

			this.Gz(a, b);
		},

		Gz: function (arr, arrData) {
			let a = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'editRecordBan')

			let b = document.createElement("div")

			for (var i = 0; i <= arr.length - 1; i++) {

				b.style[arr[i]] = arrData[i];
			}




			a.appendChild(b)


			let e = document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1]).editDate.length
			let f = $(document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'editRecordBan').children).size()
			b.id = contentBoxIdArray[contentBoxIdArray.length - 1] + 'editRecordBan' + 'editRecordBaninBan' + f;

		}
	}



	//编辑栏中的确认更改按钮 因为与提交按钮冲突 所以只在编辑栏中显示一个
	function reditsubmit(d) {
		let a = document.getElementById('editArea_id').value;


		document.getElementById(reditIdsave + 'contentFr' + 'contentTag').innerText = a;
		showOperationInterface('reditsubmit')


		//在确认修改后，开始执行下列函数

		document.getElementById(reditIdsave).editNum += 1
		editRecordBtminnerText(reditIdsave, document.getElementById(reditIdsave).editNum)
		let timeArr = document.getElementById(reditIdsave).editDate;
		let nowTime = DateN();
		if (timeArr.length >= 5) {     //重点！timeArr的length是修改记录条目的数量
			timeArr.shift();
			timeArr.push(nowTime);
		} else {
			timeArr.push(nowTime);
		}
		console.log(document.getElementById(reditIdsave).editDate);

		reditIdsave = null; //清空变量中的基础ID
	}



	//编辑栏关闭按钮 
	function offBtm() {
		document.getElementById('editArea_id').value = null;
		showOperationInterface('offBtm');
	}


	//内容栏的伸缩
	function box_content(a) {

		var bb = document.getElementById(a.id + 'contentTag');

		var d = a.offsetHeight;
		var c = bb.offsetHeight;//内容实际宽度

		if (d == 80) {
			if (c > 80) {
				a.style.height = c + 10 + 'px';
				if (c > 340) {
					a.style.overflow = 'auto';
				}
			}
		} else {
			a.style.overflow = 'hidden';
			a.style.height = '80px'

		}
	}

	//编辑栏中的 提交按钮 将富文本中的内容提交至后端
	function submit(submitClass) {  //参数存一个字符串 用来判断是哪个按钮


		var a = document.getElementById('editArea_id').value;
		var b;
		if (a == '') {
			alert('请填写内容')
			return;
		} else {
			Zgz();



			$.ajax({
				type: "post",
				url: "/zhuya/index.php?p=10kmen&a=upDetaContentBox",
				data: { isUser: 'is', classIdJs: '', classNameJs: '' },//提交到demo.php的数据
				dataType: "json",//回调函数接收数据的数据格式

				success: function (msg) {   //异步 


					console.log(msg);
				},
				error: function (msg) {
					console.log(msg);
				}
			});


			document.getElementById(contentBoxIdArray[contentBoxIdArray.length - 1] + 'contentTag').innerText = a;
			showOperationInterface('submit');

		}
	}



	//编辑栏开关
	function showOperationInterface(yesBtm) {
		let c = document.getElementById('newContent_buttom_id');
		let a = document.getElementById('editArea_id');
		let e = document.getElementById('submit')
		var b = document.getElementById('reditsubmit');
		let d = document.getElementById('Zcontent');
		let f = document.getElementById('offBtm')


		if (yesBtm == 'offBtm') {
			a.style.bottom = '-240px'
			a.value = ''
			b.style.bottom = '-50px'
			e.style.bottom = '-50px';
			f.style.bottom = '-50px';
			c.style.display = 'block';
			window.scrollTo(0, document.documentElement.scrollHeight)
			d.style.paddingBottom = '40px'
			return;
		}

		if (a.offsetTop == 635) {
			switch (yesBtm) {
				case 'submit':
					e.style.bottom = '5px';
					break;
				case 'reditsubmit':
					b.style.bottom = '5px';
					break;
			}
			a.style.bottom = '5px'
			f.style.bottom = '60px';
			d.style.paddingBottom = '255px'
			c.style.display = 'none';
			window.scrollTo(0, document.documentElement.scrollHeight)

		} else if (a.offsetTop == 390) {

			// if (yesBtm === 'reditsubmit') {
			// 	let e = document.getElementById('submit');
			// 	e.style.bottom = '-50px'
			// 	b.style.bottom = '5px'
			// 	console.log(e);
			// } else {

			// }

			a.style.bottom = '-240px'
			a.value = ''
			b.style.bottom = '-50px'
			e.style.bottom = '-50px';
			f.style.bottom = '-50px';
			c.style.display = 'block';
			window.scrollTo(0, document.documentElement.scrollHeight)
			d.style.paddingBottom = '40px'
		}



	}







</script>
<!-- <link rel="stylesheet" href="/zhuya/js/10kman.js"> -->

<!-- <script type="module">

	import { classGZ } from "./js/10kman_ClassGz.js";
	var GZclass = new classGZ;
	console.log(GZclass);




</script> -->








</script>
<script src="./Js/Tkl_index_bd.js"></script>
<script src="./Js/Tkl_Btm.js"></script>
<script src="./Js/Tkl_Gz.js"></script>
<script src="./Js/Tkl_stoarged_unsql.js"></script>
<script src="./Js/jquery.min.js"></script>

</html>